/// TimeSeriesChart: Use StaticDateTimeTickProviderSpec instead of default AutoDateTimeTickProviderSpec
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

var data1 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 14, 16, 00), 100),
  new LinearSales(DateTime(2019, 4, 13, 16, 00), 75),
  new LinearSales(DateTime(2019, 4, 12, 16, 00), 78),
];

var data2 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 04, 00), 55),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 99),
  new LinearSales(DateTime(2019, 4, 15, 04, 00), 75),
  new LinearSales(DateTime(2019, 4, 14, 16, 00), 75),
];

var data3 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 16, 08, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 00, 00), 100),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 75),
  new LinearSales(DateTime(2019, 4, 15, 08, 00), 78),
];

var data4 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 10, 00), 55),
  new LinearSales(DateTime(2019, 4, 16, 04, 00), 99),
  new LinearSales(DateTime(2019, 4, 15, 22, 00), 75),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 75),
];

var data5 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 16, 11, 12), 25),
  new LinearSales(DateTime(2019, 4, 16, 06, 24), 100),
  new LinearSales(DateTime(2019, 4, 16, 01, 46), 75),
  new LinearSales(DateTime(2019, 4, 15, 20, 48), 78),
];

var data = [
  data1,
  data2,
  data3,
  data4,
  data5,
];

void main() {
  runApp(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.fallback(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Chart Demo'),
        ),
        body: PointsLineChart(),
      )
  ));
}

class PointsLineChart extends StatefulWidget {
  @override
  PointsLineChartState createState() => PointsLineChartState();
}

class PointsLineChartState extends State<PointsLineChart> {

  int index = 0;
  int previousIndex;
  List<LinearSales> lineData = data[0];

  Widget chartWidget() {
    var series = [
      new charts.Series<LinearSales, DateTime>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.dataTime,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: lineData,
      )
    ];

    final tickSpecs = <charts.TickSpec<DateTime>>[
      new charts.TickSpec(
        // Value must match the domain value.
        lineData[0].dataTime,
        // Optional label for this tick, defaults to domain value if not set.
        label: DateFormat('MM-dd\nkk:mm').format(lineData[0].dataTime),
      ),
      // If no text style is specified - the style from renderSpec will be used
      // if one is specified.
      new charts.TickSpec(
        // Value must match the domain value.
        lineData[1].dataTime,
        // Optional label for this tick, defaults to domain value if not set.
        label: DateFormat('MM-dd\nkk:mm').format(lineData[1].dataTime),
      ),
      new charts.TickSpec(
        // Value must match the domain value.
        lineData[2].dataTime,
        // Optional label for this tick, defaults to domain value if not set.
        label: DateFormat('MM-dd\nkk:mm').format(lineData[2].dataTime),
      ),
      new charts.TickSpec(
        // Value must match the domain value.
        lineData[3].dataTime,
        // Optional label for this tick, defaults to domain value if not set.
        label: DateFormat('MM-dd\nkk:mm').format(lineData[3].dataTime),
      ),
      new charts.TickSpec(
        // Value must match the domain value.
        lineData[4].dataTime,
        // Optional label for this tick, defaults to domain value if not set.
        label: DateFormat('MM-dd\nkk:mm').format(lineData[4].dataTime),
      ),
    ];

    var chart = new charts.TimeSeriesChart(series,
      animate: false,
      animationDuration: const Duration(milliseconds: 300),
      defaultRenderer: new charts.LineRendererConfig(includePoints: true),
      domainAxis: new charts.DateTimeAxisSpec(
        tickProviderSpec: charts.StaticDateTimeTickProviderSpec(tickSpecs),
      ),
      behaviors: [
        new charts.LinePointHighlighter(
            showHorizontalFollowLine:
            charts.LinePointHighlighterFollowLineType.none,
            showVerticalFollowLine:
            charts.LinePointHighlighterFollowLineType.nearest),

      ],
    );

    return Container(
      height: 350,
      padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
      child: new Card(
          child: GestureDetector(
            onScaleUpdate: (ScaleUpdateDetails scaleDetails) {
              debugPrint("scale details:" + scaleDetails.toString());
            },
            child: Padding(
              padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
              child: chart,
            ),
          )
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: [
            new Expanded(
              child: chartWidget(),
            ),
          ],
        ),
        SizedBox(
          height: 35.0,
        ),
        Text('Current level ${index + 1}',
            style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700)),
        SizedBox(
          height: 35.0,
        ),
        RaisedButton(
          onPressed: () {
            debugPrint("preIndex=$previousIndex curIndex=$index click Zoom in.");
            previousIndex = index;
            index++;
            if (index > 4) index = 4;
            setState(() {
              lineData = data[index];
            });
          },
          child: Text('Zoom in'),
        ),
        RaisedButton(
          onPressed: () {
            debugPrint("preIndex=$previousIndex curIndex=$index click Zoom out.");
            previousIndex = index;
            index--;
            if (index < 0) index = 0;
            setState(() {
              lineData = data[index];
            });
          },
          child: Text('Zoom out'),
        ),
      ],
    );
  }
}

/// Sample linear data type.
class LinearSales {
  final DateTime dataTime;
  final int sales;

  LinearSales(this.dataTime, this.sales);
}
